<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.事件修饰符</title>
		<style>
			*{
				margin-top: 20px;
			}
			.box{
				width: 300px;
				height: 100px;
				background-color:skyblue;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				三个重要的事件修饰符：
						1.prevent：阻止默认事件；
						2.stop：阻止事件冒泡；
						3.once：事件只触发一次；
						备注：事件修饰符，可以串联

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- prevent修饰符 -->
			<form action="https://www.baidu.com">
				<button @click.prevent="showMsg1">点我提示信息1</button>
			</form>

			<!-- stop修饰符 -->
			<div @click="showMsg1" class="box">
				<button @click.stop="showMsg2">点我提示信息2</button>
			</div>

			<!-- once修饰符 -->
			<button @click.once="showMsg3">点我提示信息3</button>

			<!-- 修饰符的串联 -->
			<form action="https://www.baidu.com" @click="showMsg3">
				<button @click.stop.prevent="showMsg4">点我提示信息4</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			methods:{
				showMsg1(){
					alert('你好啊1！')
				},
				showMsg2(){
					alert('你好啊2！')
				},
				showMsg3(){
					alert('你好啊3！')
				},
				showMsg4(){
					alert('你好啊4！')
				}
			}
		})
	</script>
</html>